/**
 * 创建一个热力图网格
 * @param {number} w - 网格的列数
 * @param {number} h - 网格的行数
 * @param {Array<number>} data - 包含0-1浮点数的列表，用于填充网格
 * @param {HTMLElement} container - 热力图将被插入的容器元素
 */
function createHeatmap(w, h, data, container, config) {
    console.log("createHeatmap", w, h, data, container);
    // 清空容器
    container.innerHTML = '';
    config = config || {};
    const min = config['min'] || 0;
    const max = config['max'] || 1;

    // 创建表格
    const table = document.createElement('table');
    table.style.borderCollapse = 'collapse';
    table.style.marginBottom = '0px';
    // 遍历行和列，创建网格
    for (let y = 0; y < h; y++) {
        const row = document.createElement('tr');
        for (let x = 0; x < w; x++) {
            const td = document.createElement('td');
            td.style.border = "none"
            td.style.padding = "0px";
            const cell = document.createElement('div');
            td.appendChild(cell);
            const index = y * w + x;

            // 获取数据值并计算颜色
            const value = data[index] != null ? (data[index] - min) / (max - min) : -1;
            const color = getColor(value);

            // 设置单元格样式
            cell.style.backgroundColor = color;
            cell.style.width = '32px';
            // cell.style.minWidth = '20px';
            // cell.style.maxWidth = '20px';
            cell.style.height = '32px';
            cell.style.lineHeight = '32px';
            // cell.style.minHeight = '20px';
            // cell.style.maxHeight = '20px';
            cell.style.border = '1px solid #ccc';
            cell.style.textAlign = 'center';
            cell.style.verticalAlign = 'middle';
            cell.style.fontSize = '12px';
            cell.style.padding = "0px";

            // 设置单元格内容
            cell.textContent = data[index] != null ? Math.round(data[index]) : "";

            // 添加到行
            row.appendChild(td);
        }
        // 添加行到表格
        table.appendChild(row);
    }
    // 将表格添加到容器
    container.appendChild(table);
}

/**
 * 根据值计算颜色，从浅绿色到红色
 * @param {number} value - 0-1之间的浮点数
 * @returns {string} - RGB颜色字符串
 */
function getColor(value) {
    // disabled if value <0
    if (value < 0) {
        return "#989898"
    }
    // 计算RGB值
    const red = Math.round(255 * value);
    const green = Math.round(255 * (1 - value));
    const blue = 0;

    // 返回RGB颜色字符串
    return `rgb(${red}, ${green}, ${blue})`;
}
